<route lang="jsonc" type="page">
{
  "layout": "tabbar",
  "style": {
    "navigationBarTitleText": "我的"
  }
}
</route>

<script lang="ts" setup>
import { useUserStore } from '@/store'

// 获取用户状态
const userStore = useUserStore()

const serviceStats = ref([
  { label: '已派单', value: 0, url: '' },
  { label: '服务中', value: 0, url: '' },
  { label: '已完成', value: 0, url: '' },
  { label: '待评价', value: 0, url: '' },
])

// 计算属性：是否已登录
const isLoggedIn = computed(() => {
  return !!userStore.userInfo.usersId
})

// 处理登录按钮点击
function handleLogin() {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}

// 处理退出登录
function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        await userStore.logout()
        uni.showToast({
          title: '已退出登录',
          icon: 'success',
        })
      }
    },
  })
}

// 点击用户信息区域
function goToUserProfile() {
  uni.navigateTo({
    url: '/pages/user/profile',
  })
}
</script>

<template>
  <scroll-view class="bg-#f7f7f7 pb-4" style=" height: calc(100vh - 60rpx);" scroll-y>
    <!-- 用户信息头部 -->
    <view class="mb-5 flex items-center justify-between p-4">
      <view class="flex items-center">
        <image class="mr-5 h-10 w-10 rounded-full" :src="isLoggedIn ? (userStore.userInfo.headimgurl || 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/avatar.png') : 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/avatar.png'" mode="aspectFill" :lazy-load="true" />
        <view class="flex flex-col">
          <text class="mb-1 text-lg font-medium">
            {{ isLoggedIn ? (userStore.userInfo.nickname || userStore.userInfo.loginName) : '游客' }}
          </text>
          <text class="text-sm text-gray-500">
            {{ isLoggedIn ? '' : '请登录后使用全部功能' }}
          </text>
        </view>
      </view>

      <view>
        <button v-if="!isLoggedIn" class="login-btn" @tap="handleLogin">
          登录/注册
        </button>
        <button v-else class="login-btn" @tap="goToUserProfile">
          查看个人信息
        </button>
      </view>
    </view>

    <!-- 服务工单统计 -->
    <view
      class="mx-3 mb-5 rounded-3 p-3" style="background: linear-gradient(280.67deg, #FFFFFF 7.49%, #FFF6F6 92.51%);
"
    >
      <view class="mb-5 flex items-center justify-between">
        <text class="text-base font-medium">
          我的服务工单
        </text>
        <view class="flex items-center text-xs text-gray-500">
          <text>更多</text>
          <text class="iconfont icon-right ml-1 text-xs" />
        </view>
      </view>

      <view class="flex justify-between rounded-[16rpx] bg-#fff p-20rpx shadow-[0px_4px_4px_0px_#DDDDDD40]">
        <view
          v-for="(item, index) in serviceStats"
          :key="index"
          class="flex flex-1 flex-col items-center"
        >
          <text class="mb-1 text-lg font-bold">
            {{ item.value }}
          </text>
          <text class="text-xs text-gray-600">
            {{ item.label }}
          </text>
        </view>
      </view>
    </view>
    <!-- 退出登录按钮 -->
    <view v-if="isLoggedIn" class="mx-3 mb-5 rounded-3 bg-white p-3">
      <button class="logout-btn" @tap="handleLogout">
        退出登录
      </button>
    </view>

    <!-- 底部版本信息 -->
    <view class="flex justify-center py-5">
      <text class="text-xs text-gray-500">
        版本号 1.0.0
      </text>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.login-btn {
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  padding: 0 30rpx;
  background-color: #df2023;
  color: #fff;
  border-radius: 35rpx;
}

.logout-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 32rpx;
  color: #ff4d4f;
  background-color: #fff;
  border: 1px solid #ff4d4f;
  border-radius: 45rpx;
}
</style>
